<template>
  <view class="loading-com-page" v-if="!props.ready">
    <!-- 全局 -->
    <view v-if="props.type == 1" class="loading-wrap">
      <image class="pic" src="~@/static/images/common/loading.gif" mode="" />
    </view>
    <!-- 局部 -->
    <view
      v-if="props.type == 2"
      class="loading-com"
      :style="state.loadingComStyle"
    >
      <view class="txt" v-if="txt">加载中</view>
      <image class="pic" src="~@/static/images/common/loading.gif" mode="" />
    </view>
  </view>
</template>
<script setup lang="ts">
/**
 * 模块引入
 */
import { reactive, getCurrentInstance, onMounted } from "vue";
const { proxy } = getCurrentInstance();
/**
 * 接口
 */
/**
 * 父组件数据
 */
const props = defineProps({
  ready: {
    type: Boolean,
    default: false,
  },
  type: {
    type: Number,
    default: 1,
  },
  color: {
    type: String,
    default: "#fff",
  },
  top: {
    type: String,
    default: "40%",
  },
  txt: {
    type: String,
    default: "",
  },
});
/**
 * 数据
 */
const state = reactive({
  loadingComStyle: {},
});
/**
 * 初始方法
 */
onMounted(() => {
  handleStyle();
});
/**
 * 功能方法
 */
const handleStyle = () => {
  state.loadingComStyle = {
    background: props.color,
    top: props.top,
  };
};
/**
 * 父组件方法
 * const emit = defineEmits(['function']);
 * emit('function', data);
 */
/**
 * 父组件传递生命周期方法
 * onShareAppMessage  分享好友
 * onShareTimeline 分享朋友圈
 * onReachBottom 页面内触底
 */
</script>
<style lang="scss" scoped>
@import url("@/static/css/theme.scss");
.loading-com-page {
  .loading-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    .pic {
      width: 150rpx;
      height: 150rpx;
    }
  }
  .loading-com {
    position: fixed;
    top: 40%;
    left: 50%;
    width: 200rpx;
    height: 200rpx;
    transform: translate(-50%, 50%);
    border-radius: 40rpx;
    background-color: #fff;
    z-index: 999;
    .txt {
      position: absolute;
      color: #ddd;
      font-size: 26rpx;
      left: 50%;
      transform: translateX(-50%);
      bottom: 10rpx;
    }
    .pic {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }
}
</style>
